<template>
  <div v-if="$store.getters.headFlag">
    <div class="head_wrap">
      <h2 style="cursor:pointer;"
          @click="$router.push('/home')">积云学院</h2>
      <ul>
        <li>在线客服</li>
        <li>常见问题</li>
        <li @click="dialogFlag=true">安全中心</li>
        <li @click="quit">退出</li>
        <li>
          <span>{{}}</span>
          <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1757702845,51708014&fm=26&gp=0.jpg"
               alt="">
        </li>
      </ul>
    </div>
    <safe-alert @send="getFlag"
                :dialogVisible="dialogFlag"></safe-alert>
  </div>
</template>
<script>
// import { quitLogin, getUserApi } from '../api/common'
import safeAlert from './safeAlert'
export default {
  name: "heads",
  data () {
    return {
      dialogFlag: false, //修改密码弹出层
      userInfo: {}
    }
  },
  created () {
    // 获取用户信息
    // getUserApi().then(res => {
    //   this.userInfo = res;
    //   localStorage.tokenid = res.tokenId  //存储用户id到localStorage
    // })
  },
  methods: {
    getFlag (a) {//a子组件传来的参数
      this.dialogFlag = a;
    },
    quit () {//退出登录
      // quitLogin().then(res => {
      //   if (res.success) {
      //     this.$router.push("/login")
      //   } else {
      //     this.$alert(res.err)
      //   }
      // })
    }
  },
  components: {
    safeAlert
  }
}
</script>
<style lang="less" scoped>
.head_wrap {
  width: 100%;
  background: black;
  height: 50px;
  display: flex;
  justify-content: space-between;
  padding: 0 30px;
  box-sizing: border-box;
  line-height: 50px;
  color: white;
  ul {
    display: flex;
    height: 50px;
    line-height: 50px;
    color: gray;
    li {
      margin-right: 20px;
      cursor: pointer;
      &:hover {
        color: white;
      }
    }
    img {
      width: 40px;
      height: 45px;
      vertical-align: middle;
      margin-left: 10px;
    }
  }
}
</style>